<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{padding: 0; margin: 0;}
			body{
				width: 100%;
				height:850px;
				overflow: hidden;
				
				background:#fff url(001.jpg) no-repeat center 40px;
				
			}			
			#box{
				width: 100%;
				height: 100%;
				
				
				overflow: hidden;
			}
			#all{
				width: 400px;
				height: 600px;
				background: #000;
				margin: 150px  0 0 200px;
				padding: 20px;
				color: #fff;
				position: relative;
				
			}
			#all .one{
				float: left;
				width: 50px;
				height: 50px;
				border-radius:50% ;
				outline: none;
				background: #ffddd4;
				margin-right: 50px;		
			}
			#all .two{
				float: left;
				margin-top: 15px;	
				margin-bottom: 20px;	
			}
			#all .three{
				
				margin: 15px 5px 0;
				float: left;
				width: 20px;
				height: 20px;						
			}
			#all .wai{
				float: left;
				width: 280px;
				height: 3px;
				border-radius: 3px;
				background: #ccc;
				margin: 10px 60px 0;
				position: relative;
			}
			#all .neir{
				position: absolute;
				top: -2px;
				left: 0;
				width: 7px;
				height: 7px;
				border-radius: 4px;
				background: #fffeee;
				
			}
			#all .neil{
				position: absolute;
				top: 0px;
				left: 0;
				width: 0px;
				height: 3px;				
				background: #fff;
				
			}
			#all .left1,.right1{
				position: absolute;
				top: 77px;
			}
			#all .left1{
				left: 5px;
			}
			#all .right1{
				right: 5px;
			}
			
			#all .move {
				float: left;
				width: 200px;
				height: 200px;
				background: burlywood;
				border-radius: 50%;
				position: absolute;
				top: 120px;
				left: 120px;
				background: url(002.jpg) no-repeat 0 0 ;
				overflow: hidden;
				animation: move 10s linear infinite;
				opacity: .9;
			}
			#all .move:hover{
				opacity: 1;
			}
			@keyframes move{
				0%{transform:rotate(0deg) ;}
				100%{transform:rotate(360deg);}
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="all">
				<audio id="aud" src="audio/04.mp3" ></audio>
				<input class="one" type="button" value="播放" />
				<input class="three" type="button" value="-">
				<input class="two" type="range"/>
				<input class="three" type="button" value="+">
				<span class="left1 sp">00:00:00</span>
				<div class="wai">
					<div class="neil"></div>
					<div class="neir"></div>
				</div>
				<span class="right1 sp">00:00:00</span>
				<div class="move"></div>
			</div>
		</div>
		<script>
			var aud = document.getElementById("aud")
			var btn = document.getElementsByTagName("input")
			var ospan = document.getElementsByTagName("span")
			btn[0].onclick = function(){
				if(aud.paused){
					aud.play()
					this.value = "暂停"
					this.style.background="#a8ebfe"
				}else{
					aud.pause()
					this.value = "播放"
					this.style.background="#ffddd4"
				}
			}
			btn[1].onclick = function(){
				aud.volume = .1
				btn[2].value = 1
						
			}
			btn[2].onmouseup = function(){
				aud.volume = this.value/100
						
			}
			btn[3].onclick = function(){
				aud.volume = 1	
				btn[2].value = 100
				alert(aud.duration)
			}

//			setInterval(function(){				
//			var alltime = parseInt(aud.duration)
//				
//				console.log(alltime)
//			},1000)
			
			function zero(num){
				if(num<10){
					return "0"+num
				}else{
					return num
				}
			}
		</script>
	</body>
</html>
